<template>
    <div class="list-component">
        <el-form class="search-bar" :inline="true" :model="filter" ref="filter" :rules="validatorRules">
            <el-form-item label="版本号"  prop="version">
                <el-input v-model="filter.version" placeholder="请输入版本号" clearable></el-input>
            </el-form-item>
            <el-form-item class="filter-button">
                <el-button type="primary" size="small" @click="getList(1)">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="list">
            <div class="button-bar" v-show="false">
                <el-button class="btn" type="primary" size="mini" icon="el-icon-delete" @click="onDelete">删除</el-button>
            </div>
            <div class="data">
                <el-table :data="listData.data" ref="listData" stripe @select-all="onSelectAll" @select="onSelect" v-height="'auto'" >
                    <el-table-column type="index" label="序号" prop="index"  align="center" width="60px" >
                        <div slot-scope="scope">
                            {{(listData.pageNum - 1) * listData.pageSize + 1 + scope.$index }}
                        </div>
                    </el-table-column>
                    <el-table-column label="版本号" prop="version"    align="center" width=""></el-table-column>
                    <el-table-column label="提交人" prop="userName"  align="center"   width=""></el-table-column>
                    <el-table-column label="提交时间" prop="createTime"  align="center"   width=""></el-table-column>
                    <el-table-column label="反馈内容"  type="expand"  align="center"    width="150"  class="opt">
                        <div slot-scope="props">{{props.row.content || "暂无内容"}}</div>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination layout="prev, pager, next" 
                :current-page="listData.pageNum"
                :page-size="listData.pageSize"
                :total="listData.total" 
                @current-change="getList"
                @prev-click="getList"
                @next-click="getList"
            ></el-pagination>
        </div>
        <el-dialog title="反馈内容" :visible.sync="showDialog">
            <contentDetail  :initData="initData" ></contentDetail>
        </el-dialog>
    </div>
</template>
<script>
import contentDetail from './feedbackList-view.vue'
export default {
    components:{contentDetail},
    data(){
        return{
            filter: {
                name:'',
                version:'',
            },
            listData:{
                pageNum:1,//页码
                pageSize:25,
                total:5,//总共条数
                data:[]
            },
            checked:[],
            initData:{},
            showDialog:false,
            validatorRules:{
                version:[
                    {validator:this.checkVersion, trigger: 'change'},
                ],
            },
            
        }
    },
    methods:{
        getList(pageNum){
            if(this.filter.version){
                var isValidate=false
                this.$refs.filter.validate((bool)=>{
                    if(bool){
                        isValidate=true
                    }
                })
                if(!isValidate){return}
            }
            var submitData={
                current:typeof pageNum=='number' ? pageNum : this.listData.pageNum,
                size:this.listData.pageSize,
                ...this.filter,
            };
            this.$http.feedbackList(submitData)
            .then((res)=>{
                var data=res.data.data;
                if(!data){
                    this.$message.error("数据异常!")
                    return
                }
                this.$set(this.listData,'pageNum',data.current || this.listData.pageNum);
                this.$set(this.listData,'pageSize',data.size || this.listData.pageSize);
                this.$set(this.listData,'total',data.total );
                this.$set(this.listData,'data',data.records)
				
            }).catch((err)=>{
                if(err.data && err.data.message){
                    
                }else{
                    window.message.close()
                    window.message= this.$message({
                        type:'error',
                        message:'程序出错,查询失败!',
                        showClose:true,
                    })
                }
                throw(err)
            })
        },

        checkVersion(rule, value, callback){
            if(!this.filter.version.match(/^\d*$/g)){
                callback(new Error('版本号只能为整数数字!'));
            }else {
                callback();
            }
        },

        //查看详情
        onViewDetail(rowData){
            this.initData=rowData.row
            this.showDialog=true
        },

         //全选
        onSelectAll(selection){
            this.checked=selection
        },
        //选择
        onSelect(selection,row){
            this.checked=selection
        },



        onDelete(){
            let ids=this.checked.map((item)=>{
                return item.id
            });
            let submitData={ids:ids,moduleName:"app配置"}
            this.$http.feedbackDelete(submitData)
            .then((res)=>{
                var data=res.data
                this.$message.success("删除成功!")
                this.getList()//重新加载列表
            }).catch((err)=>{
                throw(err)
            })

        },

        closeDialog(){
            this.showDialog=false
        }


    },
    created(){
        this.getList()
    }


}
</script>

